<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户搜索</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 0px auto;
            margin-top: 100px;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px;
            margin-left: -8px;
        }

        .show {
            margin-top: -2px;
            margin-left: 3px;
            width: 495px;
            border: 1px solid #999;
            display: none;
        }
        .show li{
            list-style: none;
            margin-left: -30px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<form autocomplete="off">

    <div class="content">
        <img src="img/logo.jpg">
        <br/><br/>
        <input type="text" id="username">
        <input type="button" value="黑马一下">

    </div>
    <div style="width: 643px;margin: 0px auto;">
        <!--用于显示联想的数据-->
        <ul id="show" class="show">
            <!-- <li>张三</li>
            <li>张三</li>
            <li>张三</li>
            <li>张三</li>-->
        </ul>
    </div>

</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1 给输入框绑定keyup键盘抬起事件
    $("#username").keyup(function () {
        //2 在匿名函数中获取输入框中的内容
        let username = $("#username").val();
        console.log("keyup...."+username);
        if(username){
            //4 如果有内容,就发送异步请求,获取结果展示到页面上,显示在下方的弹出框中
            $.ajax({
                url:"userServlet",
                data:{username:username},
                type:"get",
                dataType:"json",
                success:function (msg) {
                    //显示在下方的弹出框中
                    // console.log(msg);
                    //有多少个user就拼接多少个li标签
                    let lis=``;
                    for(let user of msg){
                        lis+=`<li>${user.name}</li>` //每遍历一次就拼接一个li标签
                    }
                    //添加到ul中
                    $("#show").html(lis).show();
                }
            })
        }else{
            //3 如果没有内容,就隐藏弹出框
            $("#show").hide();
        }
    });
</script>
</html>